<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :title="scrollTop>0?'商品详情':''" :navbarType='scrollTop>0?0:5'></wlk-navbar>
        <wlk-canvas mode="goods" :item="item" :qrcode="qrcode" ref="childComponent"></wlk-canvas>
        <view class="content relative" v-if="!loading">
            <view>
                <u-swiper
                        radius="0"
                        :list="item.images"
                        indicator
                        :indicatorStyle="indicatorStyle"
                        indicatorMode="dot"
                        height="300"
                ></u-swiper>
            </view>
            <view class="detail-content pd30">
                <view class="name">{{item.title}}</view>
                <view class="desc u-line-1 mt10">{{item.desc}}</view>
                <view class="money mt10">
                    <view class="vip wlkflex br04 overHidden">
                        <view class="vip-name" :style="{backgroundColor: themeColor}">会员价</view>
                        <text class="vip-price"><text class="mr05">¥</text>{{item.vip_price}}</text>
                    </view>
                </view>
                <view class="price mt10 wlkflex justify-between wd100">
                    <view class="left bold">
                        <text class="mr05">¥</text> <text class="num">{{item.price}}</text>
                    </view>
                    <view class="right">
                        已售{{item.sales}}
                    </view>
                </view>
                <u-gap height="20" bgColor="#FFFFFF"></u-gap>
                <view class="wlkflex justify-between mb20">
                    <view class="wlkflex">
                        <view class="tip" :style="{backgroundColor: themeColor}"></view>
                        <view class="tip-title bold">详情介绍</view>
                    </view>
                </view>
                <block v-if="!$u.test.isEmpty(item.content)">
                    <u-parse :content="item.content" :selectable="true"></u-parse>
                </block>
                <block v-else>
                    <u-empty
                            :icon="uEmpty.data"
                            text="暂无详情介绍"
                    >
                    </u-empty>
                </block>

            </view>
            <u-back-top :scroll-top="scrollTop" top="400" z-index="9999" icon="arrow-up" :customStyle="{
            backgroundColor:themeColor
        }" :iconStyle="iconStyle"></u-back-top>
            <view class="fixed-buy-btn wd100 wlkflex justify-between">
                <view class="other-btn wlkflex justify-between">
                    <view class="tel-btn" @click="showShare=true">
                        <u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="分享" name="share" :color="themeColor" size="27"></u-icon>
                    </view>
                    <view class="kf-btn" @click="openWork()">
                        <u-icon labelPos="bottom" labelColor="#333" labelSize="12px" label="客服" name="server-man" color="#333" size="27"></u-icon>
                    </view>
                </view>
                <view class="buy-btn">
                    <u-button :customStyle="{
                    fontWeight: 'bold',
                    height:'90rpx'
                }" :color="themeColor" size="large" :disabled="!item.stock>0" shape="circle" :text="item.stock>0?'立即购买':'暂无库存'" @click="goodsAdd"></u-button>
                </view>
            </view>
            <view class="fixed-cart relative wlkflex justify-center" :style="{backgroundColor: themeColor}" @click="jump('/pages/index/cart')">
                <image  src="/static/images/index/cart.png" mode="widthFix"></image>
                <view class="badge" v-if="item.cartTotal>0">
                    <u-badge bgColor="#FF5904"  max="99" :value="item.cartTotal"></u-badge>
                </view>
            </view>
        </view>

        <u-popup closeable :show="addShow" @close="addShow=false" round="20">
            <wlk-goods-add @editAddShow="setAddShow"  :item="item"></wlk-goods-add>
        </u-popup>
        <u-popup safeAreaInsetBottom :customStyle="shareStyle" :show="showShare" @close="closeShare" round="20">
            <view class="share-box">
                <view class="pd30">
                    <view class="center title">立即分享给好友</view>
                    <view class="share-btn-info wlkflex">
                        <!-- #ifdef H5 || MP-WEIXIN -->
                        <block  v-if="platform=='wxMiniProgram'">
                            <button open-type="share" @share='onShareAppMessage' class="wlkflex justify-center wrap" >
                                <view class="icon-box wlkflex justify-center" style="background-color: #07c160">
                                    <u-icon  name="weixin-fill" size="32" color="#FFFFFF"></u-icon>
                                </view>
                                <view class="btn-name wd100 center mt10">微信好友</view>
                            </button>
                        </block>
                        <!-- #endif -->
                        <view class="wlkflex justify-center wrap" @click="canvas">
                            <view class="icon-box wlkflex justify-center">
                                <u-icon name="photo-fill" size="32" :color="themeColor"></u-icon>
                            </view>
                            <view class="btn-name wd100 center mt10">分享海报</view>
                        </view>

                    </view>
                </view>
                <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                <view class="close center" @click="closeShare">取消</view>
            </view>
        </u-popup>
	</view>
</template>

<script>
    var _self;
    import share from "@/wlkutils/share";
    import { mapGetters} from 'vuex';
    import platform from "@/wlkutils/platform";
    import { formatRichText,toUrl, toWork } from '@/wlkutils/tools';
	export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty','isLogin','service']),
        },
		data() {
			return {
                indicatorStyle:{
                    left:'30rpx'
                },
                scrollTop:0,
				id:'',
                item:{},
                loading:true,
                addShow:false,
                showShare:false,
                swiperCurrent:0,
                current:0,
                iconStyle: {
                    color: '#FFFFFF'
                },
                shareStyle:{
                },
                platform:platform.get(),
                showCanvas:false,
                qrcode:''
			};
		},
        watch:{
            isLogin(val){
                this.getData();
            }
        },
        onLoad(options) {
            _self = this;
            _self.id = this.$Route.query.id;
        },
        onShow() {
            if(_self.id>0){
                this.getData();
            }
        },
        onPageScroll : function(e) {
            _self.scrollTop = e.scrollTop;
        },
        onShareAppMessage(res){
            let data = new Object();
            data.title = this.item.title;
            data.desc = this.item.desc;
            data.params = {id:this.id};
            data.imageUrl = this.item.images[0];
            return share.setShareInfo(data);
        },
        methods: {
            closeShare(){
                this.showShare = false;
            },
            initShareInfo(){
                let data = new Object();
                data.title = this.item.title;
                data.desc = this.item.desc;
                data.params = {id:this.id};
                data.imageUrl = this.item.images[0];
                return share.setShareInfo(data);
            },
            getData(){
                uni.$u.http.post('goods/getDetail', {
                    id:this.id
                }).then(res => {
                    _self.item = res.data.item;
                    if (!uni.$u.test.isEmpty(_self.item.content)) {
                        _self.item.content = formatRichText(_self.item.content);
                    }
                    _self.loading = false;
                }).catch(res => {

                })
            },
            jump(url){
                toUrl(url)
            },
            openWork(){
                toWork(this.service.kf_url,this.service.corp_id);
            },
            goodsAdd(){
                this.addShow = true;
            },
            setAddShow(quantity){
                this.addShow = false;
                this.item.cartTotal += parseFloat(quantity);
            },
            async canvas(){
                if(!this.isLogin){
                    this.showShare = false;
                    this.$store.commit('setLoginPopupShow', true);
                    return false;
                }
                // 渲染
                // #ifdef MP
                let res = await uni.$u.http.post('wechat/getUnlimitedQRCode',
                    {id:this.id,type:'goods'},{custom: {hideMsg: true}}
                ).then(res => {
                    _self.qrcode =  res.data;
                    _self.$refs.childComponent.canvas();
                    _self.showShare = false;
                })
                // #endif

            },
        }
	}
</script>

<style lang="scss">
    page{
        background-color: #FFFFFF!important;
       .detail-content{
           .name{
               font-size: $font-lg;
               font-weight: bold;
           }
           .desc{
               font-size: $font-base;
               color: $uni-text-color-grey;
           }
           .money{
               font-size: $font-base;
               .vip{
                   .vip-name{
                       font-size: $font-base;
                       color: #FFE785;
                       padding: 6rpx 10rpx;

                   }
                   .vip-price{
                       background-color: $-wash-wait-color;
                       padding: 6rpx 10rpx;
                       border-radius: 0 4px 4px 0;
                   }
               }
           }
           .price{
               .left{
                   color: $-wash-price-color;
                   font-size: $font-lt;
                   .num{
                       font-size: $font-max;
                   }
               }
               .right{
                   font-size: $font-sm;
                   color: $uni-text-color-grey;
                   text-align: right;
               }

           }
           .tip{
               width: 8rpx;
               height: 28rpx;
               margin-right: 20rpx;
               border-radius: 10px;
           }
           .tip-title{
               font-size: $font-lt;
           }
           .scroll-list{
               box-shadow: 0 2px 4px rgba(0,0,0,.06);
               image{
                   width: 200rpx;
                   height: 250rpx;
                   border-radius: 8px 8px 0 0;
               }
               .realname{
                   text-align: center;
                   padding: 20rpx 0;
                   font-size: $font-base;
               }
           }

       }
        .fixed-buy-btn{
            position: fixed;
            z-index: 999;
            padding: 20rpx 30rpx;
            background-color: #FFFFFF;
            bottom: 0;
            box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
            .other-btn{
                width: 20%;
            }
            .buy-btn{
                width: 72%;
            }
        }
        .fixed-cart{
            position: fixed;
            bottom: 150px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            image{
                width: 40rpx;
                height: 40rpx;
            }
            .badge{
                position: absolute;
                top: -15rpx;
                right: -10rpx;
                border: 2px solid #FFFFFF;
                border-radius: 15px;
            }
        }
        .share-box{
            .title{
                font-size: $font-base;
                color: $uni-text-color;
                padding: 10rpx;
            }
            .share-btn-info{
                margin: 50rpx 0 20rpx 0;
                button{
                    margin: 0;
                }
                .btn-name{
                    font-size: $font-sm;
                    color: $uni-text-color-grey;
                }
                .icon-box{
                    width: 95rpx;
                    height: 95rpx;
                    border-radius: 50%;
                    background-color: #F9F9F9;

                }
            }
            .close{
                line-height: 100rpx;
            }
        }
        .share-image{
            width:100%;
        }
    }
</style>
